AULA04 - Formatação CSS: propriedades de fontes e textos¶

AGENDA¶

  • Família de Fontes
    • Genéricas
    • WebFonts
    • Google Fonts
  • Propriedades CSS de Fontes
  • Propriedades CSS de Textos
  • Referências
  • Perguntas

1. Família de Fontes¶

  • Para conhecer mais sobre a história do CSS, consulte History.
  • Para conhecer mais sobre web fontes, consulte History Web Fonts.

1.1. Fontes¶

  • Pesquisas indicam que para uma boa leitura dos sites, cada linha de texto deve conter entre 45 a 90 caracteres. A quantidade de caracteres depende da família de fonte utilizada.
  • O padrão é 65 caracteres.
  • Sugestões:
    • para dispositivos pequenos, utilizar o tamanho da fonte: 16px, altura mínima linha: 1.2em. Ou,
    • utilizar o tamanho da fonte: 18px, altura mínima linha: 1.2em.

1.2. Propriedade font-family¶

  • Permite formatar a família de fontes.

seletor = tag ou classe ou id

seletor {
    propriedade: valor;
}

/* Exemplo utilizando seletor do tipo identificador*/

#ft1 {
    font-family: sans-serif;
}
  • No arquivo de estilo, a propriedade font-family: Indica o nome da fonte a ser utilizada.
  • Poderá indicar diversas fontes, separadas por vírgula.
    • Caso o navegador não encontre a fonte desejada, utiliza o default do computador.
    • Se o nome for composto, deve ser declarado entre aspas duplas.

1.3. Fontes genéricas¶

  • Valores para as famílias de fontes genéricas são:
    • Serif
    • Sans-serif
    • Monospace
    • Cursive
    • Fantasy

Arquivo: index.html

<!--Arquivo index.html-->

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <title>Aula03</title>
  <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <h1> IFSP - Bragança Paulista  </h1>
  <h1 id="ft1"> A fonte utilizada neste título foi Serif.</h1>
  <h1 id="ft2"> A fonte utilizada neste título foi Sans-Serif.</h1>
  <h1 id="ft3"> A fonte utilizada neste título foi Monospace.</h1>
  <h1 id="ft4"> A fonte utilizada neste título foi Cursive.</h1>
  <h1 id="ft5"> A fonte utilizada neste título foi Fantasy.</h1>
</body>
</html>

Arquivo: estilo.css

/* Arquivo estilo.css dentro da pasta css. */

#ft1 {
  font-family: serif;
}
#ft2 {
  font-family: sans-serif;
}
#ft3 {
  font-family: monospace;
}
#ft4 {
  font-family: cursive;
}
#ft5 {
  font-family: fantasy;
}

Figura 1: Exemplo de uso de família de fontes genéricas
Fonte: Autoria própria

1.4. Fontes WebFonts¶

  • IE aceita somente extensão EOT. Demais aceitam TTF e OTF.
  • São fontes com direitos autorais, pagas:

font-family: indica o nome da família de fontes a ser utilizada.

src: url(''): indica o local onde a fonte foi armazenada com a sua extensão.

Observação:

  • Para escolher uma fonte e testar, acesse: Font Squirrel.
  • Para ler mais a respeito, consulte Propriedade @font-face CSS – Fonts externas na web.

Arquivo: index.html

<!--Arquivo index.html-->

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Aula03</title>
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <h1> IFSP - Bragança Paulista  </h1>
  <h1 id="ft1"> A fonte utilizada neste título foi Serif.</h1>
  <h1 id="ft2"> A fonte utilizada neste título foi Sans-Serif.</h1>
  <h1 id="ft3"> A fonte utilizada neste título foi Monospace.</h1>
  <h1 id="ft4"> A fonte utilizada neste título foi Cursive.</h1>
  <h1 id="ft5"> A fonte utilizada neste título foi Fantasy.</h1>
  <h1 id="ft6"> A fonte utilizada neste título foi uma WebFont (Pacifico - SIL Open Font License).</h1>
</body>
</html>

Arquivo: estilo.css

/* Arquivo estilo.css dentro da pasta css. */

#ft1 {
  font-family: serif;
}
#ft2 {
  font-family: sans-serif;
}
#ft3 {
  font-family: monospace;
}
#ft4 {
  font-family: cursive;
}
#ft5 {
  font-family: fantasy;
}
@font-face {
  font-family: Pacifico;
  src: url(../fontes/pacifico/Pacifico.ttf);
}
#ft6 {
  font-family: Pacifico;
}

Figura 2: Exemplo de uso de família de fontes genéricas e webFonts
Fonte: Autoria própria

1.5. Google Fonts¶

  • Para utilizar as fontes do google, acesse o link Fontes do Google, escolha a fonte a utilizar e insira no seu arquivo html o link para a fonte, e no seu arquivo css, a regra de formatação da fonte.

Arquivo: index.html

<!--Arquivo index.html-->

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Aula03</title>
    <link href="https://fonts.googleapis.com/css2?family=Modak&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/estilo.css">
</head>
<body>
  <h1> IFSP - Bragança Paulista  </h1>
  <h1 id="ft1"> A fonte utilizada neste título foi Serif.</h1>
  <h1 id="ft2"> A fonte utilizada neste título foi Sans-Serif.</h1>
  <h1 id="ft3"> A fonte utilizada neste título foi Monospace.</h1>
  <h1 id="ft4"> A fonte utilizada neste título foi Cursive.</h1>
  <h1 id="ft5"> A fonte utilizada neste título foi Fantasy.</h1>
  <h1 id="ft6"> A fonte utilizada neste título foi uma WebFont (Pacifico - SIL Open Font License).</h1>
  <h1 id="ft7"> A fonte utilizada neste título foi uma Fonte do Google.</h1>
</body>
</html>

Arquivo: estilo.css

/* Arquivo estilo.css dentro da pasta css. */

#ft1 {
  font-family: serif;
}
#ft2 {
  font-family: sans-serif;
}
#ft3 {
  font-family: monospace;
}
#ft4 {
  font-family: cursive;
}
#ft5 {
  font-family: fantasy;
}
@font-face {
  font-family: Pacifico;
  src: url(../fontes/pacifico/Pacifico.ttf);
}
#ft6 {
  font-family: Pacifico;
}
#ft7 {
  font-family: 'Modak', cursive;
}

Figura 3: Exemplo de uso de família de fontes genéricas, webFonts e google fonts
Fonte: Autoria própria

2. Propriedades CCS de Fontes¶

2.1. Propriedade font-size¶

  • Permite formatar o tamanho da fonte.
  • Valores possíveis: pixel, percentage, xx-small, x-small, small, smaller medium, large, x-large, xx-large, larger.
  • Exemplo: Formatando o tamanho da fonte dos parágrafos com 16px. 
p {
    font-size: 16px;
}

2.2. Propriedade font-size-adjust¶

  • Permite formatar a altura das letras minúsculas em relação as maiúsculas.
  • Valores possíveis: valor numérico múltiplo do tamanho da fonte. Utilize o valor none para não formatar este item.
  • No exemplo, as letras menores serão exibidas na altura de 8px. (= 16px / 2)
  • Exemplo: 
p {
    font-size: 16px;
    font-size-adjust: .5;
}

2.3. Propriedade font-style¶

  • Permite formatar o estilo da fonte.
  • Valores possíveis: normal, italic, oblique.
  • Algumas famílias de fontes não reconhecem o valor italic, logo, utilize oblique.
  • Exemplo: 
p {
    font-style: italic;
}

2.4. Propriedade font-weight¶

  • Permite formatar o negrito da fonte.
  • Valores possíveis: normal, bold.
  • Exemplo: 
p {
    font-weight: bold;
}

2.5. Propriedade font-variant¶

  • Permite formatar as letras minúsculas em maiúsculas, em tamanho menor.
  • Valores possíveis: normal, small-caps.
  • Exemplo: 
p {
    font-variant: small-caps;
}

2.6. Propriedade line-height¶

  • Permite formatar a altura de linha.
  • Valores possíveis: utilizar um múltiplo do tamanho da fonte, px, em, %.
  • Dê preferência para a unidade de medida relativa em.
  • Exemplo: se utilizar 2em, equivale a espaçamento duplo.
p {
    line-height: 2em;
}

2.7. Propriedade font¶

  • Permite formatar a fonte de uma única vez.
  • Valores possíveis: verificar cada uma das propriedades que são opcionais. O valor da altura de linha: line-height poderá ser em em, %, px.
  • Exemplo:
    • Ordem para declarar valores da propriedade font: font-style font-variant font-weight font-size/ line-height font-famil;
    • Os valores para as propriedades de font-size e de font-family são obrigatórios. 
p {
    font: italic bold small-caps 3em/.9 ’Title Font’, Constantia, Georgia, Times, ‘Times New Roman’ ;

}


p {
    font-size: 16px;  
    font-size-adjust: .5;  
    font-style: italic;  
    font-weight: bold;  
    font-variant: small-caps;  
    line-height: 2em;
}

3. Propriedades CCS de Textos¶

  • Para aprofundamento, consulte MDN Web Docs.

3.1. Propriedade color (Aula03_FormatacaoCSS-ConceitosBasicos)¶

  • Permite formatar a cor do texto.
  • Valores possíveis: rgb, rgba, hexadecimal, hsl. Verificar aula anterior, caso tenha alguma dúvida.
  • Cada uma das cores RGB variam de 0 a 255.
  • Exemplo: 
p {
    color: rgb(245, 34, 9);
}

3.2. Propriedade text-align¶

  • Permite formatar o alinhamento horizontal do texto.
  • Valores possíveis: right, left, center, justify.
  • Exemplo: 
p {
    text-align: right;
}

3.3. Propriedade text-transform¶

  • Permite formatar como o texto será visualizado.
  • Valores possíveis: none, capitalize, uppercase, lowercase.
  • Exemplo: 
p {
    text-transform: capitalize;
}

3.4. Propriedade text-decoration¶

  • Permite formatar o subescrito do texto.
  • Valores possíveis: none, overline, line-through, underline.
  • Exemplo: 
p {
    text-decoration: none;
}

3.5. Propriedade text-indent¶

  • Permite formatar a indentação da primeira linha do texto.
  • Valores possíveis: px, em, %.
  • Exemplo: 
p {
    text-indent: 10px;
}

3.6. Propriedade text-direction¶

  • Permite formatar a direção do texto.
  • Valores possíveis: ltr (valor default), rtl, initial, inherit.
  • Exemplo: 
p {
    text-direction: rtl;
}

3.7. Propriedade text-shadow¶

  • Permite formatar a sombra do texto. Blur = borrão. Se for 0px, a sombra será sólida.
  • Valores possíveis: none, initial, inherit.
  • Sintaxe:

seletor = tag ou classe ou id

seletor {
    text-shadow: h-shadow v-shadow blur color;
}
  • Exemplo1: Valores h-shadow e v-shadow positivos (direita, abaixo).
p {
    text-shadow: +10px +10px +3px blue;
}

  • Exemplo2: Valores h-shadow positivo e v-shadow negativo (direita, acima). 
p {
    text-shadow: +10px -10px +3px blue;
}

  • Exemplo3: Valores h-shadow e v-shadow negativos (esquerda, acima). 
p {
    text-shadow: -10px -10px +3px blue;
}

  • Exemplo4: Valores h-shadow negativo e v-shadow positivo (esquerda, abaixo).
p {
    text-shadow: -10px +10px +3px blue;
}

3.8. Propriedade letter-spacing¶

  • Permite formatar o espaçamento entre letras.
  • Valores possíveis: normal, px, em, %.
  • O tamanho pode ser em pixel, em, e se negativo, aproxima as letras.
  • Dê preferência para a unidade de medida relativa em.
  • Exemplo: 
p {
    letter-spacing: 2em; 
}

3.9. Propriedade word-spacing¶

  • Permite formatar o espaçamento entre palavras.
  • Valores possíveis: normal, px, em, %.
  • O tamanho pode ser em pixel, em, e se negativo, aproxima as palavras.
  • Dê preferência para a unidade de medida relativa em.
  • Exemplo: 
p {
    word-spacing: 2em; 
}

3.10. Propriedade vertical-align¶

  • Permite formatar o alinhamento vertical do texto. Funciona somente com elementos inline, inline-block, table-cells.
  • Valores possíveis: baseline (valor default), px, em, %, initial, inherit, sub, super, top, text-top, middle, bottom, text-bottom.
  • Exemplo: 
p {
    vertical-align: middle;
}

3.11. Propriedade white-spacing¶

  • Permite formatar o alinhamento vertical do texto.
  • Valores possíveis:
    • normal (valor default),
    • nowrap (mais de um espaço é compactado em um só, não quebra linha),
    • pre (espaço é preservado pelo navegador, quebra se tiver br),
    • pre-line (mais de um espaço é compactado em um só),
    • pre-wrap (espaço é preservado pelo navegador),
    • initial,
    • inherit.
  • Exemplo: 
p {
    white-spacing: pre-line;
}

Referências¶

  • Esta aula foi elaborada a partir do conteúdo disponibilizado em cada um dos links indicados no próprio texto.

ADS - HTML5, CSS3, JS.
Modelo e formato elaborado pela profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2022.

</div> </div>